<template>
	<view class="content">
		<view class="content_title">基本设置</view>
		<view class="content_box">
			<view class="content_box_list">
				<view class="name">通讯录名称</view>
				<view class="right" @click="link('/admin/set/setName')">
					<view class="box">
						<text>小赵</text>
					</view>
					<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
				</view>
			</view>
			<view class="content_box_list">
				<view class="name">入群填写项</view>
				<view class="right" @click="link('/admin/set/setIs')">
					<view class="box">
						<text>姓名/手机...</text>
					</view>
					<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
				</view>
			</view>
			<view class="content_box_list" @click="link('/admin/set/jianjie')">
				<view class="name">通讯录介绍</view>
				<view class="right">
					<view class="box">
						<text></text>
					</view>
					<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
				</view>
			</view>
			<view class="content_box_list">
				<view class="name">通讯录图标</view>
				<view class="right" @click="setImg">
					<view class="box">
						<image src="https://txl.cnpowder.com.cn/images/qunicon.png" class="icon"></image>
					</view>
					<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
				</view>
			</view>
		</view>
		<view class="content_title">权限设置</view>
		<view class="content_box">
			<view class="content_box_list">
				<view class="name">入群审核</view>
				<view class="right" @click="selectShow(0)">
					<view class="box">
						<text>{{isName[0]}}</text>
					</view>
					<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
				</view>
			</view>
			<view class="content_box_list">
				<view class="name">手机号加密</view>
				<view class="right" @click="selectShow(1)">
					<view class="box">
						<text>{{isName[1]}}</text>
					</view>
					<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
				</view>
			</view>
			<view class="content_box_list">
				<view class="name">交换名片</view>
				<view class="right" @click="selectShow(2)">
					<view class="box">
						<text>{{isName[2]}}</text>
					</view>
					<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
				</view>
			</view>
		</view>
		<view class="content_title">其他设置</view>
		<view class="content_box">
			<view class="content_box_list">
				<view class="name">所属行业</view>
				<view class="right" @click="showTab=true">
					<view class="box">
						<text>网课</text>
					</view>
					<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
				</view>
			</view>
			<view class="content_box_list">
				<view class="name">通讯录标签</view>
				<view class="right" @click="link('/admin/set/setTab')">
					<view class="box">
						<text></text>
					</view>
					<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
				</view>
			</view>
			<view class="content_box_list">
				<view class="name">背景颜色</view>
				<view class="right" @click="openColor">
					<view class="box">
						<uv-pick-color ref="pickerColor" :color="color" @confirm="setColor"></uv-pick-color>
						<view class="color" :style="{backgroundColor:isColor}"></view>
					</view>
					<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
				</view>
			</view>
			<view class="content_box_list">
				<view class="name">排序方式</view>
				<view class="right">
					<view class="box">
						<text>智能排序</text>
					</view>
					<uv-icon name="arrow-right" color="#7f8289" size="22"></uv-icon>
				</view>
			</view>
		</view>
		<view class="content_text">
			<text>
				排序说明\n
				1、修改排序后，需要3-5小时才能生效。\n
				2、【智能排序】是根据群成员身份角色、奉献度、活跃度、加入时间、是否认证等各种因素进行综合排序，具体效果是群发起人、管理员、活跃用户、新成员会自动排在列表前面。
			</text>
		</view>
		<view class="content_select" v-if="showSelect">
			<view class="bj" @click="showSelect = false"></view>
			<view class="box">
				<view class="list" v-for="(v,k) in select[index]" :key="k" @click="setSelect(k)">
					<view class="name">{{v.name}}</view>
					<uv-icon v-if="is[index] == v.id" name="checkmark-circle-fill" color="#e94f06" size="22"></uv-icon>
				</view>
			</view>
		</view>
		
		<view class="content_hangye" v-if="showTab">
			<view class="bj" @click="showTab=false"></view>
			<view class="box">
				<view class="title">
					选择行业
					<view class="icon" @click="showTab=false">
						<uv-icon name="close" size="22"></uv-icon>
					</view>
				</view>
				<view class="list" v-for="(v,k) in listTab" :key="k">
					<view class="list_title">
						{{v.title}}
					</view>
					<view class="list_box">
						<view :class="['item',tabId==v1.id?'is':'']" v-for="(v1,k1) in v.list" :key="k1" @click="setTab(v1.id,v1.name)">{{v1.name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		link
	} from '@/utils/utils.js'
	import {
		ref,
		defineProps,
	} from 'vue'
	const color = ref({
		r: 255,
		g: 255,
		b: 255,
		a: 1
	})
	const isColor = ref('#fff')
	const pickerColor = ref(null)
	const openColor = () => {
		pickerColor.value.open()
	}
	const setColor = (e) => {
		color.value = e.rgba
		isColor.value = e.hex
	}
	
	const setImg = () => {
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: function(res) {
				console.log(JSON.stringify(res.tempFilePaths));
			}
		})
	}
	const showSelect = ref(false)
	const select = ref([
		[
			{name:'不审核，自动入群',id:'1'},
			{name:'入群需要我的审核',id:'2'},
			{name:'只查看，禁止任何人加入',id:'3'},
		],
		[
			{name:'号码完全公开',id:'1'},
			{name:'同群不加密',id:'2'},
			{name:'号码后8位加星',id:'3'},
		],
		[
			{name:'自由交换',id:'1'},
			{name:'限制交换',id:'2'},
		]
	])
	const index = ref(0)
	const is = ref(['1','1','1'])
	const isName = ref(['不审核，自动入群','号码完全公开','自由交换'])
	const selectShow = (i)=>{
		index.value = i
		showSelect.value = true
	}
	const setSelect = (i)=>{
		is.value[index.value] = select.value[index.value][i].id
		isName.value[index.value] = select.value[index.value][i].name
		showSelect.value = false
	}
	
	const listTab = ref([
		{
			title:'机械/汽车/电子/五金',
			list:[
				{name:'汽车相关',id:'1'},
				{name:'汽车相关',id:'2'},
				{name:'汽车相关',id:'3'},
				{name:'汽车相关',id:'4'},
				{name:'汽车相关',id:'5'}
			]
		}
	])
	const showTab = ref(false)
	const indexTab = ref(null)
	const tabName = ref('')
	const tabId = ref('')
	const setTab = (id,name)=>{
		showTab.value = false
		tabName.value = name
		tabId.value = id
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		background: #f5f6fa;

		&_title {
			width: calc(100% - 60rpx);
			padding: 30rpx;
			font-size: 28rpx;
		}

		&_box {
			width: 100%;
			background: #fff;

			&_list {
				width: calc(100% - 60rpx);
				padding: 30rpx;
				border-bottom: 1px solid #f5f6fa;
				display: flex;
				align-items: center;

				.name {
					width: 200rpx;
					font-size: 32rpx;
				}

				.right {
					width: calc(100% - 200rpx);
					display: flex;
					justify-content: flex-end;

					.box {
						flex: 1;
						margin-right: 20rpx;
						display: flex;
						justify-content: flex-end;

						text {
							color: #999;
						}

						image {
							width: 100rpx;
							height: 100rpx;
							border-radius: 100%;
						}

						.color {
							width: 50rpx;
							height: 50rpx;
							box-shadow: 0 0 5px 0 rgba(0, 0, 0, .2);
						}
					}
				}
			}
		}

		&_text {
			width: calc(100% - 60rpx);
			padding: 30rpx;
			font-size: 28rpx;
			color: #666;
			line-height: 50rpx;
		}
		&_select{
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			.bj{
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background: rgba(0, 0, 0, .2);
			}
			.box{
				width: calc(100% - 60rpx);
				position: absolute;
				.list{
					width: calc(100% - 60rpx);
					padding: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					background: #fff;
					border-bottom: 1px solid #ebecf4;
					min-height: 50rpx;
				}
				.list:nth-child(1){
					border-radius: 8px 8px 0 0;
				}
				.list:nth-last-child(1){
					border-bottom: none;
					border-radius: 0 0 8px 8px;
				}
			}
		}
		&_hangye{
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			.bj{
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				background: rgba(0,0,0,.2);
			}
			.box{
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 50%;
				background: #fff;
				.title{
					width: 100%;
					height: 100rpx;
					font-size: 36rpx;
					font-weight: bold;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					border-bottom: 1px solid #ddd;
					.icon{
						position: absolute;
						right: 30rpx;
					}
				}
				.list{
					width: calc(100% - 60rpx);
					padding-left: 30rpx;
					padding-right: 30rpx;
					&_title{
						width:100%;
						padding-top: 30rpx;
						font-size: 32rpx;
						color: #999;
					}
					&_box{
						width: 100%;
						padding-top: 10rpx;
						display: flex;
						flex-wrap: wrap;
						.item{
							width: calc(33.33% - 20rpx);
							height: 60rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							border: 1px solid #ddd;
							margin-top: 20rpx;
							border-radius:6px;
							font-size: 28rpx;
							margin-left: 20rpx;
						}
						.item:nth-child(3n+1){
							margin-left: 0;
						}
						.item.is{
							background: #e94f06;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>